<template>
  <el-card>
    <!-- 顶部内容 -->
    <div class="pagination">
      <el-button type="success"
                 size="small"
                 icon="el-icon-edit"
                 style="background: #67c23a; color: #fff"
                 @click="addMenus = true">添加菜单</el-button>
    </div>
    <!-- 新增权限组选项 -->
    <!-- <div class="options">
      <el-table v-if="addMenus"
                :data="menusList"
                default-expand-all
                row-key="id">
        <el-table-column label=""
                         row-click="handleLog"
                         prop="title" />
      </el-table>
    </div> -->
    <!-- 树形表格 -->
    <el-table :data="menusList"
              default-expand-all
              row-key="id">
      <el-table-column label="标题">
        <template #default="{row}">
          <i v-if="!row.pid"
             class="el-icon-folder-opened" />
          <i v-else
             class="el-icon-folder" />
          <span style="margin-left: 10px">{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权限点代码"
                       prop="code"
                       width="700px" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary"
                     icon="el-icon-edit"
                     circle
                     @click="handleOpenEdit(row.id)" />
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle
                     @click="handelMenusDel(row.id)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增菜单 -->
    <el-dialog title="新增菜单"
               :visible="addMenus"
               @close="handleAddClose">
      <!-- 表单 -->
      <el-form :model="fromData"
               label-width="270px">
        <el-form-item label="权限组名称">
          <el-radio-group v-model="fromData.is_point">
            <el-radio :label="false">
              菜单列表
            </el-radio>
            <el-radio :label="true">
              权限点
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="fromData.pid"
                     placeholder="请选择活动区域">
            <el-option label="主导航"
                       :value="0" />
            <el-option v-for="item in menus"
                       :key="item.id"
                       :label="item.title"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码">
          <el-input v-model="fromData.code"
                    style="width:50%" />
        </el-form-item>
        <el-form-item label="权限标题">
          <el-input v-model="fromData.title"
                    style="width:50%" />
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <template #footer>
        <el-button type=""
                   size="small"
                   @click="handleAddClose">取消</el-button>
        <el-button type="primary"
                   size="small"
                   style="background-color: #409eff; color:#fff"
                   @click="handleAddMenus">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑菜单 -->
    <el-dialog title="编辑菜单"
               :visible="EditMenus"
               @close="handleEditClose">
      <!-- 表单 -->
      <el-form :model="fromData"
               label-width="270px">
        <el-form-item label="权限组名称">
          <el-radio-group v-model="fromData.is_point">
            <el-radio :label="false"
                      disabled>
              菜单列表
            </el-radio>
            <el-radio :label="true"
                      disabled>
              权限点
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="fromData.pid"
                     placeholder="请选择活动区域">
            <el-option label="主导航"
                       :value="0" />
            <el-option v-for="item in menus"
                       :key="item.id"
                       :label="item.title"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码">
          <el-input v-model="fromData.code"
                    style="width:50%" />
        </el-form-item>
        <el-form-item label="权限标题">
          <el-input v-model="fromData.title"
                    style="width:50%" />
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <template #footer>
        <el-button type=""
                   size="small"
                   @click="handleEditClose">取消</el-button>
        <el-button type="primary"
                   size="small"
                   style="background-color: #409eff; color:#fff"
                   @click="handleEdit">确定</el-button>
      </template>
    </el-dialog>

  </el-card>
</template>

<script>
import { getMenusListAPI, delMenusAPI, addMenusAPI, getMenusDetailAPI, putMenusAPI } from '@/api/base-menus'
import list2Tree from '@/utils/shift'
export default {
  name: 'MenusView',
  data () {
    return {
      // 菜单树形数据
      menusList: [],
      // 菜单列表数据
      menus: [],
      // 控制新增菜单弹窗显示
      addMenus: false,
      // 表单数据
      fromData: {
        is_point: false,
        pid: '',
        code: '',
        title: ''
      },
      // 控制编辑弹框显示
      EditMenus: false
    }
  },
  created () {
    this.getMenusList()
    // this.menusList = this.testList
  },
  methods: {
    // 获取菜单列表
    async getMenusList () {
      const res = await getMenusListAPI()
      const arr = this.handle(res)
      // console.log(arr)
      // console.log(list2Tree(arr, null))
      this.menus = arr
      this.menusList = list2Tree(arr, null)
    },
    // 处理树转列表数据函数
    handle (tree) {
      const arr = []
      tree.forEach(item => {
        // 判断有无孩子
        if (item.points) {
          const children = this.handle(item.points)
          delete item.points
          arr.push(item, ...children)
        } else if (item.childs) {
          const children = this.handle(item.childs)
          delete item.childs
          arr.push(item, ...children)
        } else {
          arr.push(item)
        }
      })
      return arr
    },
    // 关闭新增菜单弹窗
    handleAddClose () {
      this.addMenus = false
    },
    // 删除菜单
    async handelMenusDel (id) {
      try {
        await this.$confirm('确定删除吗', '提示', {
          type: 'warning'
        })
        await delMenusAPI(id)
        // console.log(res)
        // 刷新列表
        this.getMenusList()
        // 提示成功
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.warning('已取消')
      }
    },
    handleLog (row) {
      console.log(1)
    },
    // 新增菜单
    async handleAddMenus () {
      const res = await addMenusAPI({
        ...this.fromData,
        id: ''
      })
      console.log(res)
      // 关闭弹框
      this.handleAddClose()
      // 刷新数据
      this.getMenusList()
    },
    // 关闭编辑弹窗
    handleEditClose () {
      this.EditMenus = false
    },
    // 打开编辑弹窗
    async handleOpenEdit (id) {
      this.MenusId = id
      this.EditMenus = true
      const res = await getMenusDetailAPI(id)
      console.log(res)
      this.fromData = res
    },
    // 编辑菜单
    async handleEdit () {
      await putMenusAPI(this.MenusId, this.fromData)
      // console.log(res)
      // 关闭弹窗
      this.handleEditClose()
      // 刷新页面
      this.getMenusList()
    }
  }
}
</script>

<style scoped lang="scss">
/* .el-card {
  margin: 20px;
  margin-top: 90px;
} */

.el-alert {
  margin-top: 20px;
}
.el-button--primary {
  color: #409eff;
  background-color: #ecf5ff;
  &:hover {
    color: #fff;
    background-color: #409eff;
  }
}
.el-button--danger {
  color: #f56c6c;
  background-color: #fef0f0;
  &:hover {
    color: #fef0f0;
    background-color: #f56c6c;
  }
}
.pagination {
  display: flex;
  justify-content: right;
}
.options {
  position: fixed;
  top: 355px;
  left: 675px;
  width: 230px;
  z-index: 9999;
  // border: 1px solid #ccc;
}
</style>
